<template>
  <div>
    <!-- 整车物流维护 -->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle"
      @resetChange="resetChange"
      :labelWidth="110"></TopFilter>

    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTables ref="table" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :datakey="'records'"
        columnsRef="zjvehicleMaterials" :onRowSelectChange="selectChangeHandle" :isSelectColumn="false"
        :onColumnsChange="columns => (this.columns = columns)">
        <template slot="controls" slot-scope="props">
          <!-- <multiuse-button size="small" type="primary" @click="addHandle(1)">新 增</multiuse-button> -->
          <!-- <multiuse-button size="small" type="primary" @click="addHandle(2)">下 发</multiuse-button> -->
          <multiuse-button size="small" type="primary" @click="addHandle(4)">导 出</multiuse-button>
          <!-- <multiuse-button size="small" type="primary" @click="addHandle(3)" :disabled="isOpen">是否可订购调整</multiuse-button> -->
          <!-- <multiuse-button size="small" type="primary" @click="addHandle(5)">导 入</multiuse-button> -->
        </template>
      </FilterTables>
    </Spin>

    <Drawer :visible.sync="visible" :title="'基本信息'" destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ChildrenModel :rowData="formData" @close="emitcloseHandler" />
    </Drawer>
    <Drawer :visible.sync="addvisible" :title="'基本信息'" destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <AddModel :rowData="formData" @close="addcloseHandler" />
    </Drawer>
    <BaseDialog :visible.sync="orderVisible" :title="'基本信息'" destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Order :list="selectList" @close="ordercloseHandler" />
    </BaseDialog>
    <BaseDialog :visible.sync="importVisible" :title="'导入'" destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <importFiles :rowData="formData" @close="importcloseHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { getList, excelList, updateOrderStatus, issueInfo, vehicleConfiguration, getDealerUser, exporturl } from '@/api/omSaleP/vehicleParameters/vehicleMaterials/index.js';
import { dictionary } from '@/utils/dictMixin';
import ChildrenModel from './childrenModel.vue';
import AddModel from './addModel.vue';
import Order from './order.vue';
import importFiles from './importFiles';
import { exportExcelFile } from '@/utils';
import {
  getCarOEM,
  getBrandListOEM,
  getSeriesListOEM,
  getModelListOEM,
  getPackageListOEM,
  getOptionListDictOEM,
  getWcolorList,
  getIcolorList,
  addCar,
  updateCar,
  getCarExport,
  importCar,
  getExcelList,
  getExcelListV3,
} from '@/api/common/cars/masterDataCars';
export default {
  name: 'zjvehicleMaterials',
  components: {
    ChildrenModel,
    AddModel,
    Order,
    importFiles
  },
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: getList,
      fetchParams: {
        xhrAbort: true
      },
      formData: {},
      exportLoading: false,
      visible: false,
      addvisible: false,
      IssueVisible: false,
      orderVisible: false,
      isOpen: true,
      selectList: [],
      isIssue: true,
      importVisible: false
    };
  },
  mixins: [dictionary],
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    // this.getUser();
    // this.getcarList();
    this.getDictBrandList();
    this.getColors();
    this.getIColors();
  },
  methods: {
    resetChange(params) {
 
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      const str = this.topFilterList.find(x => x.fieldName == 'configId');
 
      this.$refs.TopFilter.RESET_FORM();
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    createdFrom() {
      return [
        // {
        //   type: 'INPUT_CASCADER',
        //   label: '车型选择',
        //   fieldName: 'vehicleInfo',
        //   placeholder: '请选择',
        //   options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
        //   itemList: []
        // },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brandId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeBrandSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeSeriesSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeModelSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changePackageSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          // type: 'INPUT',
          label: '外饰',
          // fieldName: 'colorStr',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'SELECT',
          // type: 'INPUT',
          label: '内饰',
          fieldName: 'trimColorId',
          // fieldName: 'interiorColor',
          placeholder: '请选择',
          itemList: [],
        },
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '物料描述',
          fieldName: 'productName',
          placeholder: '请输入'
        },
        // {
        //   type: 'SELECT',
        //   label: '是否下发',
        //   fieldName: 'isIssue',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('1004')
        // },
        // {
        //   type: 'SELECT',
        //   label: '是否可订购',
        //   fieldName: 'orderStatus',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('1004')
        // },

      ];
    },
    async getDictBrandList() {
      const res = await getBrandListOEM();
      if (res.resultCode === 200) {
 
        this.topFilterList.find((item) => item.fieldName === 'brandId').itemList = res.data.map((x) => ({ value: x.brandId, text: x.brandName }));
        // this.topFilterList = [...this.topFilterList]
      }
    },
    async changeBrandSelect(brandsid) {
      // if (!brandsid) {
      this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (brandsid) {
        const res = await getSeriesListOEM(brandsid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'seriesId').itemList = res.data.map((x) => ({ value: x.seriesId, text: x.seriesName }));
        }
      }
    },
    async changeSeriesSelect(seriessid) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      if (brandsid && seriessid) {
        const res = await getModelListOEM(brandsid, seriessid);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = res.data.map((x) => ({ value: x.modelId, text: x.modelName }));
        }
      }
    },
    async changeModelSelect(modelId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'packageId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (modelId) {
        const res = await getPackageListOEM(brandsid, seriessid, modelId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'packageId').itemList = res.data.map((x) => ({ value: x.packageId, text: x.configName }));
        }
      }
      // }
    },
    async changePackageSelect(packageId) {
      const brandsid = this.topFilterList.find((item) => item.fieldName === 'brandId').initialValue;
      const seriessid = this.topFilterList.find((item) => item.fieldName === 'seriesId').initialValue;
      // if (!brandsid || !seriessid || !modelId) {
      this.topFilterList.find((item) => item.fieldName === 'optionId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = [];
      // } else {
      if (packageId) {
        const res = await getOptionListDictOEM(packageId);
        if (res.resultCode === 200) {
          this.topFilterList.find((item) => item.fieldName === 'optionId').itemList = res.data.map((x) => ({ value: x.optionId, text: x.optionName }));
        }
      }
      // }
    },
    async getColors() {
      const res = await getWcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'colorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    async getIColors() {
      const res = await getIcolorList();
      if (res.resultCode === 200) {
        this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = res.data.map((x) => ({ value: x.colorId, text: x.colorName }));
      }
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   fixed: 'left',
        //   render: (props, h) => {
        //     return (
        //       <div>
        //         <multiuse-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
        //           编辑
        //         </multiuse-button>
        //       </div>
        //     );
        //   }
        // },
        // {
        //   title: '品牌名称',
        //   dataIndex: 'brandName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          sorter: true,
          align: 'center',
          width: 200,
          filter: true,
          filterType: 'input'
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置',
          dataIndex: 'packageName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          align: 'center',
          width: 250,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '内饰',
          dataIndex: 'trimColor',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '年款',
          dataIndex: 'yearModel',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '是否可订购',
        //   dataIndex: 'orderStatus',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.orderStatus, '1004')}</span>;
        //   }
        // },
        {
          title: '公告号',
          dataIndex: 'noticeNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '市场指导价',
          dataIndex: 'oemDirectivePrice',
          sorter: true,
          filter: true,
          filterType: 'input',
                    align: 'right',
          precision: 2,
          numberFormat: true
        },

        // {
        //   title: '排量',
        //   dataIndex: 'disPlacement',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6050'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.disPlacement, '6050')}</span>;
        //   }
        // },
        // {
        //   title: '变速箱',
        //   dataIndex: 'transMission',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6049'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.transMission, '6049')}</span>;
        //   }
        // },
        // {
        //   title: '排放标准',
        //   dataIndex: 'dischargeStandard',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1510'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.dischargeStandard, '1510')}</span>;
        //   }
        // },
        // {
        //   title: '续航里程',
        //   dataIndex: 'enduranceMileage',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('6051'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.enduranceMileage, '6051')}</span>;
        //   }
        // },

        // {
        //   title: '是否下发',
        //   dataIndex: 'isIssue',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.isIssue, '1004')}</span>;
        //   }
        // },

        // {
        //   title: '启用标记',
        //   dataIndex: 'isValid',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: p => {
        //     return <span>{this.createDictText(p.row.isValid, '1004')}</span>;
        //   }
        // },
        // {
        //   title: '启用日期',
        //   dataIndex: 'startDate',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'date-range'
        // },
        // {
        //   title: '操作人',
        //   dataIndex: 'updatedBy',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: [],
        //   editType: 'select',
        //   editItems: []
        // },
        // {
        //   title: '操作日期',
        //   dataIndex: 'updatedAt',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'date-range'
        // }
      ];
    },
    async getcarList() {
      let res = await vehicleConfiguration(0, { isUnlimited: 10041001 });
      console.info('res:', res)
      this.topFilterList.find(item => item.fieldName === 'vehicleInfo').itemList = res.data;
    },
    selectChangeHandle(row) {
      if (row.length > 0) {
        this.selectList = row;
        this.isOpen = false;
        // let is = false;
        // row.map(x => {
        //   if (x.isIssue == 10041001) {
        //     is = true;
        //   }
        // });
        // this.isIssue = is ? true : false;
      } else {
        this.selectList = [];
        this.isOpen = true;
        // this.isIssue = true;
      }
    },
    async addHandle(type) {
      if (type == 1) {
        this.addvisible = true;
      } else if (type == 2) {
        await this.$confirm('是否下发?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            let arr = [];
            this.selectList.map(x => {
              arr.push(x.productId);
            });
            let str = arr.join(',');
            let res = await issueInfo({ productIds: str });
            if (res.resultCode == 200) {
              this.$notify({
                title: '成功',
                message: '下发成功',
                type: 'success'
              });
            }
            this.isOpen = true;
            this.fetchParams = Object.assign({}, this.fetchParams);
          })
          .catch(() => { });
      } else if (type == 3) {
        this.orderVisible = true;
      } else if (type == 4) {
        // this.$router.push('/admin/auth/oem/downloadCenter');
        this.$confirm('是否将Excel表格保存至本地文件夹?', '提示', {
          confirmButtonText: '下载',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let json = this.fetchParams;
            this.exportLoading = true;
            excelList(json)
              .then(response => {
                exportExcelFile(response.data, '整车物料查看');
                this.exportLoading = false;
              })
              .catch(err => {
 
              });
          })
          .catch(() => {
 
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
      } else {
        this.importVisible = true;
      }
    },
    changeHandle(params) {
      this.isOpen = true;
      this.fetchParams.xhrAbort = false;
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    editHandle(data) {
      this.formData = data;
      this.visible = true;
    },
    addcloseHandler(val) {
      this.addvisible = false;
      this.isOpen = true;
      if (val) {
        this.fetchParams = Object.assign({}, this.fetchParams);
      }
    },
    emitcloseHandler(val) {
      this.visible = false;
      this.isOpen = true;
      if (val) {
        this.fetchParams = Object.assign({}, this.fetchParams);
      }
    },
    ordercloseHandler() {
      this.orderVisible = false;
      this.isOpen = true;
      this.fetchParams = Object.assign({}, this.fetchParams);
    },
    async getUser() {
      let res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'updatedBy').editItems = empList; //操作姓名
      this.columns.find(item => item.dataIndex === 'updatedBy').filterItems = empList;
    },
    importcloseHandler() {
      this.importVisible = false;
      this.fetchParams = Object.assign({}, this.fetchParams);
    }
  }
};
</script>
